<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>hello ydd 留言板</title>
    <!--semantic-ui-->
    <link href="css/semantic.min.css" rel="stylesheet">
</head>
<body>

<!--主容器-->
<div class="ui container" id="app1">

    <div class="ui segment">

        <div style="text-align: center">
            <h1 class="header">hello ydd 留言板</h1>
        </div>

        <div class="ui placeholder segment">
            <div class="ui column very relaxed stackable grid">
                <div class="column">
                    <div class="ui form">
                        <textarea v-model="info" style="max-width: 600px;" required></textarea>
                        <input type="submit" class="ui blue submit button right" value="点击留言" @click="put" style="color: aliceblue;"  />

                        <table class="ui celled structured table" style="font-size: 14px;text-align: center">
                            <tbody>
                                <tr v-for="item in allList">
                                    <td>
                                        <i style="color:rgb(165, 165, 243);font-size:10px;">{{item.id}}楼  </i>
                                        {{item.message}}  
                                        <i style="color:blue;font-size:10px;">时间:{{item.time}}</i> 
                                        <!--<i style="color:red;font-size:10px;">{{item.info}}</i>-->
                                    </td>
                                </tr>
                            
                            </tbody>
                        </table>
                        
                    </div>
                </div>
            </div>
        </div>

        

        <div class="ui segment" style="text-align: center">
            <h3>ydd温馨提示：下面没有了，别tm划了</h3>
        </div>
    </div>


</div>

<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app1",
        data:{
            info:"",
            allList:[]
        },
        methods:{
            query(){//查询所有
                that = this
                url = "http://localhost:8850/query/all"
                axios.get(url)
                .then(function(response){
                    that.allList = response.data
                },function(err){console.log(err);})
                
                
            },
            put(){
				if (this.info.replace(/(^s*)|(s*$)/g, "").length ==0){
					alert('不能为空');
				}
                that = this
                url = "http://localhost:8850/submit/" + this.info
                console.log(url)
                axios.get(url)
                .then(function(response){
                    that.info = ""
                    that.query()
                },function(err){console.log(err);})
            }
        },
        mounted:function(){
            this.query();//需要触发的函数
            // this.page();
        }
    });
</script>

</body>
</html>